<template>
    <div class="sign-container">
        <sign-header></sign-header>
            <div class="sign-main">
                <div class="container">
                    <div class="sign-modal fr">
                    <div class="form-select">
                        <div
                                class="person-btn fl"
                                :class="personSwitch?'active':''"
                                @click="signChange(0)"
                        >我要找工作</div>
                        <div
                                class="enterpris-btn fr"
                                :class="businessSwitch?'active':''"
                                @click="signChange(1)"
                        >我要招聘</div>
                    </div>
                    <el-form>
                        <el-form-item>
                            <el-input placeholder="手机号">
                                <div slot="prefix">
                                    <img src="../../../assets/images/sign-in/registered_name.png"  alt="">
                                </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-input placeholder="短信验证码">
                                <img src="../../../assets/images/sign-in/registered_mes.png" slot="prefix" alt="">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="请输入用户名：含英文、数字、下划线">
                                <img src="../../../assets/images/sign-in/registered_name.png" slot="prefix" alt="">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="请输入密码">
                                <img src="../../../assets/images/sign-in/login_password.png" slot="prefix" alt="">
                            </el-input>
                        </el-form-item>
                        <el-checkbox class="">我已同意用户协议及隐私政策</el-checkbox>
                    </el-form>
                    <div class="submit" @click="signIn">
                        注册
                    </div>
                    <div class="remarks">
                        已有账户
                        <span class="login" @click="goPage('/Login')">直接登录</span>
                    </div>
                </div>
                </div>
        </div>
        <sign-footer></sign-footer>
    </div>
</template>

<script>
    import SignHeader from '@/pages/sign-in/components/SignHeader.vue'
    import SignFooter from '@/pages/sign-in/components/SignFooter.vue'
    export default {
        name: "SignPage",
        components: {
            SignHeader,
            SignFooter
        },
        data() {
            return {
                personSwitch: false,
                businessSwitch: true
            }
        },
        methods: {
            goPage(path) {
                this.$router.push({path: path})
            },
            signIn() {
                console.log(this.personSwitch)
                if(this.personSwitch){
                    this.goPage('/PersonInfor');
                }else {
                    this.goPage('/EnterprisInfor');
                }
            },
            // 注册角色切换 swi： 0个人 1企业
            signChange(swi) {
                this.personSwitch = !swi;
                this.businessSwitch = swi
            }
        }
    }
</script>

<style scoped lang="less">
    .sign-container /deep/ el-input__prefix  {
        left: 9px;
        top: 2px;
    }
    .sign-container /deep/ .el-form-item__content {
        margin: 0;
    }
    .sign-container /deep/ .el-form-item {
        margin-bottom: 29px;
        &:last-of-type {
            margin-bottom: 19px;
        }
    }
    .sign-container /deep/ .el-checkbox__label {
        font-size:12px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .sign-container /deep/ .el-input__prefix  {
          left: 8px;
          top: 2px;
    }

    .sign-container {
        background: #fff;
        .sign-main {
            height: 800px;
            background: url("../../../assets/images/sign-in/login_bg.png") no-repeat 50% 50%/cover;
            .container {
                width: 1200px;
                background: none;
                .sign-modal {
                    width: 440px;
                    height: 560px;
                    padding: 50px 58px;
                    margin-top: 120px;
                    box-sizing: border-box;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0 4px 20px 0 rgba(51, 25, 25, 0.1);
                    border-radius: 4px;
                    .form-select {
                        height: 36px;
                        margin-bottom: 40px;
                        .person-btn, .enterpris-btn {
                            width: 155px;
                            height: 36px;
                            line-height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border: 1px solid rgba(227, 231, 237, 1);
                            font-family: MicrosoftYaHei;
                            color: rgba(51, 51, 51, 1);
                            text-align: center;
                            cursor: pointer;
                            &:hover {
                                .active;
                            }
                        }
                        .active {
                            border: 1px solid rgba(230, 31, 31, 1);
                            box-shadow: 0px 2px 4px 0px rgba(230, 31, 31, 0.12);
                            font-weight: 400;
                            color: rgba(230, 31, 31, 1);
                        }
                    }
                    .submit {
                        margin-top: 19px;
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                        background: rgba(230, 31, 31, 1);
                        font-size: 16px;
                        font-family: MicrosoftYaHei;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                    .remarks {
                        margin-top: 19px;
                        font-size: 14px;
                        text-align: center;
                        font-family: MicrosoftYaHei;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                        .login {
                            color: #188EEE;
                            cursor: pointer;
                        }

                    }
                }
            }
        }
    }
</style>